<template>
	<view class="container">
		<view class="course_cover">
			<video v-if="chapterData.chapterWay == 0" id="myVideo" :src="chapterData.videoUrl"
				autoplay='true' @fullscreenchange="fullscreenchange"></video>
			<image @tap="preview(chapterData.chapterCover)" v-if="chapterData.chapterWay == 1"
				:src="chapterData.chapterCover" mode=""></image>
		</view>
		<view class="course_name">
			<view class="course_name_text">
				<text>{{chapterData.chapterName}}</text>
				<image @click="shareApp" :src="iconUrl + '88.png'" mode=""></image>
				<!-- #ifdef MP-WEIXIN -->
				<button class="share" open-type="share">分享</button>
				<!-- #endif -->
			</view>
		</view>
		<view class="chapter_introduce">
			<view class="chapter_introduce_title">
				<view class="chapter_introduce_title_text">课程介绍</view>
				<view class="chapter_introduce_catalog_btn" @tap="catalog.openPopup">课程目录<uni-icons type="right"
						:color="'#808080'" :size="14"></uni-icons></view>
			</view>
			<view class="chapter_introduce_html">
				<mp-html :content='dealHtml(chapterData.courseInfo)'></mp-html>
			</view>
		</view>
		<uni-popup ref="popupRef" type="bottom" :is-mask-click="true" background-color="#fff"
			border-radius="24rpx 24rpx 0 0">
			<view class="catalog_popup">
				<view class="catalog_title">
					<view class="">课程目录</view>
					<text class="">共{{catalog.catalogList.length}}章</text>
				</view>
				<scroll-view scroll-y="true" class="catalog_list_scroll">
					<view class="catalog_list">
						<view class="catalog_list_item" v-for="(item,index) in catalog.catalogList" :key="index"
							@tap="catalog.closePopup(item.id)">
							<view class="catalog_list_item_left_icon">
								<image class="" :src="iconUrl + '145.png'" mode=""
									v-if="item.chapterWay == 0 && chapterId == item.id"></image>
							</view>

							<view class="catalog_list_item_text">
								<view class="catalog_list_item_text_name"
									:class="chapterId == item.id ? 'text_act' : ''">{{item.chapterName}}</view>
								<view class="catalog_list_item_text_status catalog_list_item_text_status_act"
									v-if="chapterId == item.id">
									<text v-if="item.chapterWay == 0">[正在播放]</text>
									<text v-if="item.chapterWay == 1">[图文]</text>
								</view>
								<view class="catalog_list_item_text_status" v-else>
									<image v-if="item.chapterWay == 0" :src="iconUrl + '149.png'" mode=""></image>
									<text v-if="item.chapterWay == 1">[图文]</text>

								</view>

							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import configs from '@/config';
	import { useUserStoreToRefs } from '@/store/useUserStore';
	import { dealHtml } from '@/hooks/useFunction'
	import api from '@/api'
	const { isCheck, userInfo } = useUserStoreToRefs();
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	onLoad(async (options) => {
		courseId.value = options.courseId
		chapterId.value = options.chapterId
		await getChapterData(options.chapterId)
		await catalog.getCourseChapterList(options.courseId)
	})
	onShow(() => {

	})

	const courseId = ref('')
	const chapterId = ref('')
	const popupRef = ref()
	const chapterData = ref({})
	const getChapterData = async (chapterId) => {
		const res : any = await api({
			method: 'get',
			url: `/mall/course/course-chapter/${chapterId}`
		})
		chapterData.value = res.data
		console.log(chapterData.value)
	}
	const catalog = reactive({
		catalogList: [],
		getCourseChapterList: async (courseId) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/course/course-chapter/getCourseChapterList?courseId=${courseId}`
			})
			catalog.catalogList = res.data || []
			console.log(catalog.catalogList)
		},
		openPopup: () => {
			popupRef.value.open()
		},
		closePopup: async (val : any) => {
			chapterId.value = val
			await getChapterData(val)
			popupRef.value.close()
		}
	})
	//分享
	onShareAppMessage(() => {
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${courseId.value}&data2=${chapterId.value}&type=7`;
		return {
			title: chapterData.chapterName,
			path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
			imageUrl: chapterData.chapterCover
		};
	});
	const shareApp = async () => {
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${courseId.value}&data2=${chapterId.value}&type=7`;
		const res : any = await api({
			method: 'POST',
			url: `/mall/user/v2/generateWxUrlLink`,
			data: {
				path: '/pages/shareRefereeId/index',
				query: `q=${encodeURIComponent(cans)}`,
				envVersion: configs.envVersion
			}
		});
		uni.shareWithSystem({
			summary: '',
			href: res.data,
			success() {
				// 分享完成，请注意此时不一定是成功分享
			},
			fail() {
				// 分享失败
			}
		});
	}
	const preview = (imgUrl) => {
		let images = [imgUrl]
		console.log(images, 'images')
		uni.previewImage({
			current: 0,
			urls: images,
		});
	}
	const fullscreenchange = (e) => { 
		if(!e.detail.fullScreen) {
			plus.screen.lockOrientation('portrait-primary')
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.course_cover {
		width: 100%;
		height: 422rpx;

		image {
			width: 100%;
			height: 422rpx;
		}

		video {
			width: 100%;
			height: 422rpx;
		}
	}

	.course_name {
		padding: 48rpx 32rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 8rpx solid #F9F6F6;

		.course_name_text {
			display: flex;
			justify-content: space-between;
			position: relative;

			text {
				width: 596rpx;
				display: inline-block;
				font-size: 36rpx;
				color: #1A1A1A;
				font-weight: bold;
				line-height: 1.2;
			}

			image {
				margin-top: 0rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.share {
				position: absolute;
				top: 0rpx;
				right: 0;
				width: 48rpx;
				height: 48rpx;
				opacity: 0;
			}
		}
	}


	.chapter_introduce {
		padding: 40rpx 32rpx;

		.chapter_introduce_title {
			margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			line-height: 1;
			border-bottom: 2rpx solid #E4E6E6;

			.chapter_introduce_title_text {
				font-size: 36rpx;
				color: #1A1A1A;
				font-weight: bold;
			}

			.chapter_introduce_catalog_btn {
				font-size: 28rpx;
				color: #808080;
			}
		}
	}

	.catalog_popup {
		width: 100%;
		padding: 48rpx 32rpx;
		box-sizing: border-box;
		height: 80vh;

		.catalog_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 1;

			view {
				font-size: 36rpx;
				color: #1A1A1A;
				font-weight: bold;
			}

			text {
				font-size: 24rpx;
				color: #7C807F;
			}
		}

		.catalog_list_scroll {
			height: 100%;

			.catalog_list {
				.catalog_list_item {

					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					.catalog_list_item_left_icon {
						margin-top: 40rpx;
						width: 32rpx;
						height: 32rpx;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.catalog_list_item_text {
						padding: 40rpx 0;
						width: 622rpx;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						border-bottom: 1.9rpx dashed #E6E6E6;

						.catalog_list_item_text_name {
							width: 440rpx;
							font-size: 28rpx;
							color: #5C5E5E;
							line-height: 1.3;
						}

						.catalog_list_item_text_status {
							display: flex;
							align-items: center;

							text {
								font-size: 22rpx;
								color: #7C807F;
							}

							image {
								margin-left: 16rpx;
								width: 32rpx;
								height: 32rpx;
							}

						}

						.catalog_list_item_text_status_act {
							text {
								color: #FF6084;
							}
						}

						.text_act {
							color: #FF6084;
						}
					}
				}
			}
		}
	}
</style>